<template>
  <el-form-item>
    <el-collapse v-model="activeNames">
      <el-collapse-item title="基础参数" name="1">
        <baseFormStyle />
      </el-collapse-item>
      <el-collapse-item title="基本样式" name="2">
        <div>
          <div class="edit-area marginB15">
            <span class="title">柱子宽度 </span>
            <el-input-number
              class="spacing"
              v-model="barWidth"
              :min="10"
              :max="50"
              size="mini"
            ></el-input-number>
          </div>

          <div class="edit-area marginB15">
            <span class="title">数据展示 </span>
            <el-switch v-model="labelShow" active-color="#13ce66"> </el-switch>
          </div>
        </div>

        <div class="edit-area marginB15">
          <span class="title">文字样式 </span>
          <div class="font-edit">
            <el-select
              style="width: 90px"
              v-model="fontFamily"
              placeholder="请选择"
              size="mini"
            >
              <el-option
                v-for="item in textOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-select
              class="mr15 marginB15"
              style="width: 90px"
              v-model="fontWeight"
              placeholder="请选择"
              size="mini"
            >
              <el-option
                v-for="item in textStyleOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>

            <el-input-number
              class="spacing"
              v-model="fontSize"
              :min="1"
              :max="18"
              size="mini"
            ></el-input-number>

            <div class="color-picker mr15">
              <input type="text" v-model="color" />
              <el-color-picker size="mini" v-model="color"></el-color-picker>
            </div>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="图例设置" name="3">
        <legendStyle :legendConfig="legendConfig"/>
      </el-collapse-item>
      <el-collapse-item title="X轴" name="4">
        <xAxis :xAxisConfig='chartConfig' :division='false' />
      </el-collapse-item>
      <el-collapse-item title="Y轴" name="5">
			 <yAxis :yAxisData="yAxisData"/>
			</el-collapse-item>
      <el-collapse-item title="系列设置" name="6" style="position: relative;">
        <seriesSetting :seriesSettingConfig='seriesSettingConfig' v-if="seriesSettingConfig" :formList="formList" />
      </el-collapse-item>
      <el-collapse-item title="动画设置" name="7">
        <animationConfig :animationConfig='chartConfig'/>
      </el-collapse-item>
    </el-collapse>
  </el-form-item>
</template>

<script>
import legendStyle from "../components/legendStyle";
import xAxis from "../components/xAxis";
import yAxis from '../components/yAxis'
import baseFormStyle from "../components/baseFormStyle";
import seriesSetting from "../components/seriesSetting";
import animationConfig from "../components/animationConfig";
import { mapState, mapGetters } from "vuex";
export default {
  name: "attr-qk-contrastBarChartForm",
  props: {},
  computed: {
    ...mapState({
      // projectData: state => state.editor.projectData,
      // activePageUUID: state => state.editor.activePageUUID,
      // activeElementUUID: state => state.editor.activeElementUUID,
      activeAttrEditCollapse: state => state.editor.activeAttrEditCollapse
    }),
    ...mapGetters([
      // 'currentPageIndex',
      // 'activeElementIndex',
      // 'activeElement',
      // 'activePage'
      "activeElement"
    ]),
    chartConfig() {
      return this.activeElement.propsValue.contrastBarChartForm;
    },
    yAxisData() {
      return this.activeElement.propsValue.contrastBarChartForm.yAxis;
    },
    legendConfig() {
      return this.activeElement.propsValue.contrastBarChartForm.legend;
    },
    seriesSettingConfig(){
        return this.activeElement.propsValue.contrastBarChartForm.series;
      },
    barWidth: {
      get() {
        return this.chartConfig.series[0].barWidth;
      },
      set(val) {
        this.chartConfig.series.forEach(v => {
          v.barWidth = val;
        });
      }
    },
    labelShow: {
      get() {
        return this.chartConfig.series[0].label.show;
      },
      set(val) {
        this.chartConfig.series.forEach(v => {
          v.label.show = val;
        });
      }
    },
    fontFamily: {
      get() {
        return this.chartConfig.series[0].label.fontFamily;
      },
      set(val) {
        this.chartConfig.series.forEach(v => {
          v.label.fontFamily = val;
        });
      }
    },
    fontWeight: {
      get() {
        return this.chartConfig.series[0].label.fontWeight;
      },
      set(val) {
        this.chartConfig.series.forEach(v => {
          v.label.fontWeight = val;
        });
      }
    },
    color: {
      get() {
        return this.chartConfig.series[0].label.color;
      },
      set(val) {
        this.chartConfig.series.forEach(v => {
          v.label.color = val;
        });
      }
    },
    fontSize: {
      get() {
        return this.chartConfig.series[0].label.fontSize;
      },
      set(val) {
        this.chartConfig.series.forEach(v => {
          v.label.fontSize = val;
        });
      }
    }
  },
  data() {
    return {
      activeNames: ["1"],
      textOptions: [
        {
          value: "serif",
          label: "微软雅黑"
        },
        {
          value: "monospace",
          label: "方正"
        }
      ],
      textStyle: "正常",
      textStyleOptions: [
        {
          value: "normal",
          label: "正常"
        },
        {
          value: "bold",
          label: "加粗"
        },
        {
          value: "lighter",
          label: "细体"
        }
      ],
      formList:[
          {title: '填充颜色',type:'color',route:'itemStyle'},
          {title: '系列名',type:'title',route:''},
        ]
    };
  },
  methods: {
    // handleChange(type) {
    //   switch (type) {
    //     case 1:
    //       return;
    //     default:
    //       break;
    //   }
    // }
  },
  mounted() {
    this.activeNames = this.activeAttrEditCollapse;
  },
  watch: {
    activeNames() {
      this.$store.commit("updateActiveAttrEditCollapse", this.activeNames);
    }
  },
  components: {
    xAxis,
    yAxis,
    baseFormStyle,
    seriesSetting,
    animationConfig,
    legendStyle
  }
};
</script>

<style lang='scss' scoped>
.edit-area {
  display: flex;
  width: 300px;
  .right {
    margin-right: auto;
  }
  .color-picker-long {
    display: inline-block;
    width: 195px;
    display: flex;
    justify-content: space-between;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    input {
      outline: transparent;
      border: transparent;
      // width: 60px;
      padding-left: 10px;
    }
  }
  .font-edit {
    width: 230px;
    display: flex;
    flex-flow: wrap;
    .color-picker {
      display: inline-block;
      width: 90px;
      display: flex;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      input {
        outline: transparent;
        border: transparent;
        width: 60px;
        padding-left: 10px;
      }
    }
  }
}
.mr15 {
  margin-left: 15px;
}
.spacing {
  width: 90px;
}
.title {
  width: 70px;
}
</style>
